import { SKey, modelS } from '@views/store'
import { Image, Icon } from 'vant'

type ImgSProps = {
    dir?: 'feature' | 'eye' | 'nose' | 'FEMALE/hair' | 'FEMALE/eyebrow' | 'FEMALE/dressing' | 'MALE/hair' | 'MALE/eyebrow' | 'MALE/dressing' | '',
    names: number | (string | number)[],
    storeKey: SKey,
    ext?: 'png' | 'svg',
    class?: string
}

export default ({ dir = '', names, storeKey, ext = 'png' }: ImgSProps) => {
    const imgs = Array.isArray(names) ? names as unknown as string[] : new Array(names).fill(1).map((_, idx) => idx + 1) as unknown as string[]

    const importStatment = {
        '': (name: string) => new URL(`../img/${name}.${ext}`, import.meta.url).href,
        'feature': (name: string) => new URL(`../img/feature/${name}.${ext}`, import.meta.url).href,
        'eye': (name: string) => new URL(`../img/eye/${name}.${ext}`, import.meta.url).href,
        'nose': (name: string) => new URL(`../img/nose/${name}.${ext}`, import.meta.url).href,
        'FEMALE/hair': (name: string) => new URL(`../img/FEMALE/hair/${name}.${ext}`, import.meta.url).href,
        'FEMALE/eyebrow': (name: string) => new URL(`../img/FEMALE/eyebrow/${name}.${ext}`, import.meta.url).href,
        'FEMALE/dressing': (name: string) => new URL(`../img/FEMALE/dressing/${name}.${ext}`, import.meta.url).href,
        'MALE/hair': (name: string) => new URL(`../img/MALE/hair/${name}.${ext}`, import.meta.url).href,
        'MALE/eyebrow': (name: string) => new URL(`../img/MALE/eyebrow/${name}.${ext}`, import.meta.url).href,
        'MALE/dressing': (name: string) => new URL(`../img/MALE/dressing/${name}.${ext}`, import.meta.url).href,
    }
    const getSrc = importStatment[dir]
    console.log({ imgs, names, dir })

    return <div class='imgs'>
        {imgs.map((name, idx) => <div class='img-c'>
            <Image class='img' showLoading={false} lazyLoad={idx > 8} src={getSrc(name)}
                onClick={() => modelS[storeKey] = idx as unknown as never} />
            {modelS[storeKey] == idx && <Icon name="success" />}
        </div>)}
    </div>
}